import React, { Component } from 'react'
import './index.css';
import Header from '../Header';
import Main from '../Main';
import Footer from '../Footer';
import{nanoid} from 'nanoid'
export default class App extends Component {
    state = {
        todos: [
            { id: 1, title: '媳妇儿过生日', done: false },
            { id: 2, title: '晚上买洗发水', done: false },
            { id: 3, title: '请男同事吃饭', done: true }
        ]
    }
    render () {
        let { todos } = this.state;
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    <Header addTodo={this.addTodo} />
                    <Main delete={this.delete} todos={todos} checkTodo={this.checkTodo} />
                    <Footer clean={this.clean} checkTodoAll = {this.checkTodoAll} todos={todos}/>
                </div>
            </div>
        )
    }
    //声明方法新增一个任务
    addTodo = (title) => {
        //新增一个任务
        let todo = {
            id : nanoid(),
            title: title,
            done: false
        };
        //创建一个新的数组
        let newTodos = [...this.state.todos, todo];
        //设置
        this.setState({
            todos: newTodos
        })
    }
    //声明一个方法切换任务的状态
    checkTodo = (id, status) => {
        let { todos } = this.state;
        //遍历
        // for (let i = 0; i < todos.length; i++) {
        //     //判断
        //     if (id === todos[i].id) {
        //         todos[i].done = status;
        //     }
        // }
        let newTodos = todos.map(item => {
            if (item.id === id) item.done = status;
            return item;
        })
        //设置
        this.setState({
            todos: newTodos
        })
    }
    //声明一个方法删除任务
    delete = (id) => {
        let { todos } = this.state;
        let newTodos = todos.filter(item => item.id !== id)
        //设置
        this.setState({
            todos: newTodos
        })
    }
    //声明一个方法清理已经完成的任务
    clean = () => {
        //获取todos
        let {todos} = this.state;
        //清理
        let newTodos = todos.filter(item => !item.done);
        //设置
        this.setState({
            todos: newTodos
        })
    }
    //声明一个方法全部任务的状态切换
    checkTodoAll = (status)=>{
        let newTodos = this.state.todos.map(item=>{
            item.done = status;
            return item;
        })
        this.setState({
            todos:newTodos
        })
    }
}
